<template>
  <div>
    <!--    添加角色-->
    <yj-dialog
      :modal="dialogRole.modal"
      :width="dialogRole.width"
      :title="dialogRole.title"
      :dialogVisible="dialogRole.visible"
    >
      <template slot="dialog-content">
        <el-form :model="form" :rules="roles" ref="form" size="mini" label-width="80px">
          <div class="view-detail">
            <div>
              <b>设备来源：</b>{{ form.sourceDevice }} &nbsp;&nbsp;&nbsp;

            </div>

            <div> <b>操作功能：</b>
              {{ form.descr }} 【{{ form.operUser }}】
            </div>

            <div> <b>操作类型：</b>
              {{ form.operateType }}
            </div>


            <div> <b>请求接口：</b>
              <el-tag v-if="form.type=='正常'" type="success">{{ form.type }}</el-tag>
              <el-tag v-else type="danger">{{ form.type }}</el-tag>

              <ul>
                <li>-- <b>ContentType</b>: {{ form.contentType }}</li>
                <li>--<b> Method:</b> {{ form.method }}</li>
                <li>--<b> IP:</b> {{ form.host }}({{ form.ipAddress }})</li>
                <li>-- <b>URL:</b> {{ form.url }}</li>
                <li>-- <b>Device:</b> {{ form.browser }} / {{ form.sys }}</li>
              </ul>

            </div>
            <div> <b>请求耗时：</b>{{form.takeTime}} /毫秒</div>
            <div> <b>请求时间：</b>{{form.createTime}}

            </div>

            <div> <b>请求参数：</b>
              <template v-if="form.params==''||form.params==null">
                <json-viewer :expand-depth=5 :value="{}"></json-viewer>
              </template>
              <template v-else>
                <json-viewer copyable boxed :expand-depth=5 :value="JSON.parse(form.params)"></json-viewer>
              </template>
            </div>

            <div> <b>请求Body参数：</b>
              <template v-if="form.requestBodyParams==''||form.requestBodyParams==null">
                <json-viewer :expand-depth=5 :value="{}"></json-viewer>
              </template>
              <template v-else>
                <json-viewer copyable boxed :expand-depth=5 :value="JSON.parse(form.requestBodyParams)"></json-viewer>
              </template>
            </div>

            <div> <b>接口获参：</b>
              <template v-if="form.methodParams==''||form.methodParams==null">
                <json-viewer :expand-depth=5 :value="{}"></json-viewer>
              </template>
              <template v-else>
                <json-viewer copyable boxed :expand-depth=5 :value="JSON.parse(form.methodParams)"></json-viewer>
              </template>
            </div>


            <div> <b>响应结果：</b>
              <template v-if="form.result==''||form.result==null">
                <json-viewer :expand-depth=5 :value="''"></json-viewer>
              </template>
              <template v-else>
                <json-viewer copyable boxed :expand-depth=5 :value="JSON.parse(form.result)"></json-viewer>
              </template>
            </div>

            <div> <b>异常信息：</b>
              <el-card shadow="hover"><span v-html="form.errorMsg"></span></el-card>
            </div>


          </div>
        </el-form>
        <div slot="footer" style="text-align:center;" class="dialog-footer">
          <el-button size="mini" @click="cancelDilogBtn">关闭</el-button>
        </div>
      </template>
    </yj-dialog>


    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
    >
      <template slot="top_operate" slot-scope="currentRow">
        <el-button type="primary" icon="el-icon-plus" @click="add()" size="mini">添加</el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="editTop(currentRow.slotScope)"
          size="mini"
        >修改
        </el-button>
      </template>

      <template slot="columns">
        <el-table-column width="150" prop="descr" align="center" label="操作功能">
          <template slot-scope="scope">
            <el-popover placement="top-start" trigger="hover">
              <span v-html="scope.row.descr"></span>
              <span slot="reference">
                {{
                  scope.row.descr.length > 7
                    ? scope.row.descr.substring(0, 7) + "..."
                    : scope.row.descr
                }}
              </span>
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column prop="operateType" align="center" label="操作类型"/>
        <el-table-column prop="sourceDevice" align="center" label="设备"/>
        <el-table-column prop="operUser" show-overflow-tooltip align="center" label="操作用户"/>
        <el-table-column prop="host" width="150" align="center" label="主机"/>
        <el-table-column prop="ipAddress" width="150" align="center" label="所在地"/>
        <el-table-column prop="url" width="200" align="center" label="URL"/>

        <el-table-column prop="params" show-overflow-tooltip="true" align="center" label="请求参数">
          <template slot-scope="scope">
            <span v-html="scope.row.params"></span>
          </template>
        </el-table-column>

        <el-table-column prop="methodParams" show-overflow-tooltip="true" align="center" label="方法参数">
          <template slot-scope="scope">
            <span v-html="scope.row.methodParams"></span>
          </template>
        </el-table-column>

        <el-table-column prop="requestBodyParams" show-overflow-tooltip="true" align="center" label="请求体参数">
          <template slot-scope="scope">
            <span v-html="scope.row.requestBodyParams"></span>
          </template>
        </el-table-column>

        <el-table-column prop="method" width="100px" show-overflow-tooltip="true" align="center" label="操作方法">
          <template slot-scope="scope">
            <span v-html="scope.row.method"></span>
          </template>
        </el-table-column>

        <el-table-column prop="sys" width="100px" align="center" label="操作系统"/>
        <el-table-column prop="browser" align="center" label="浏览器"/>


        <el-table-column prop="type" fixed="right" align="center" label="类型">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type=='正常'" type="success">{{ scope.row.type }}</el-tag>
            <el-tag v-else type="danger">{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>


        <el-table-column show-overflow-tooltip="true" sortable width="100px" prop="createTime" align="center"
                         label="操作时间"/>

        <el-table-column show-overflow-tooltip="true" width="100px" prop="errorMsg" align="center" label="异常信息"/>
      </template>
      <template slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-setting"
              type="text"
              @click="viewDetail(scope.row)"
              size="mini"
            >查看详情
            </el-button>
          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";

export default {
  data() {
    return {
      dialogRole: {
        width: "60%",
        title: "日志详情",
        visible: false,
        modal: true,
        loading: false,
        drawerLoading: false,
      },

      prop: {
        searchShow: true,
        operateShow: false,
        location: " ",
        getDataUrl: "/sysLog/list",
        removeUrl: "",
        searchModel: searchModel,
        reloadTable: false,
        showDelBtn: true,
        isPage: true
      },

      form: {},

      URL: {}
    };
  },
  created() {

  },
  methods: {
    viewDetail(row) {
      this.form = row;
      this.dialogRole.visible = true;
    },
    cancelDilogBtn() {
      this.dialogRole.visible = false;
    }
  }
};
</script>
<style>
.view-detail div {
  margin: 10px 0;
}
</style>
